<template>
    <div id="app">
        <p>JustifyContent</p>
        <div class="center">
            <div class="item"></div>
        </div>
        <div class="start">
            <div class="item"></div>
        </div>
        <div class="end">
            <div class="item"></div>
        </div>  
    </div>
</template>
<script>
export default {
    data() {  
    },
    methods:{
    }
}
</script>
<style scoped>
        .center{
            display: flex;
            flex-direction: column;
            /* justify-content: center; */
            align-items: center;
            height: 120px;
        }
         .start{
             display: flex;
            justify-content: flex-start;
        }
         .end{
             display: flex;
            justify-content: flex-end;
        }
        .item{
            background: red;
            height: 100px;
            width: 100px;
            border: 1px solid #000;
        }
    </style>